import React, { useState } from 'react';
//useState案例: 输入框输入,下面多一个li
export default function Caseone() {
  const [list, setList] = useState([]);
  const handle = (e) => {
    if (e.keyCode === 13) {
      const value = e.currentTarget.value;
      if (value) {
        setList([...list, value]); //拷贝一份原来的数据,把value插进去
        e.currentTarget.value = ''; //清空数据
      } else {
        alert('请输入内容');
      }
    }
  };
  return (
    <>
      <input type='text' placeholder='请输入内容' onKeyUp={handle} />
      <ul>
        {list.map((item) => (
          <li key={crypto.randomUUID()}>{item}</li>
        ))}
      </ul>
    </>
  );
}
